<template>
	<view class="content">

		<view class="text-area">
			<button type="primary" size="mini" @click="handleChose">抽题</button>
		</view>
		<view class="box">

			<view class="header">
				<view class="question">
					<image src="../../static/question.png" mode="" v-show="question!=''"></image> <text>{{question}}</text>
				</view>
				<view class="button-wrap" v-show="isShowCheckButton">
					<button type="primary" size="mini" @click="handleCheck">查看答案</button>
				</view>
			</view>
			<view class="answer" v-if="isShowAnswer">
				{{answer}}
			</view>
		</view>
		<view class="text-area" v-show="isShowAnswer">
			<button type="primary" size="mini" @click="handleCopy">检测链接</button>
		</view>
	</view>
</template>

<script>
	import {
		list
	} from '../../mock/data.js'
	import uniCopy from '../../lib/js_sdk/xb-copy/uni-copy.js'
	export default {
		data() {
			return {
				question: '',
				answer: '',
				list: list,
				isShowAnswer: false,
				isShowCheckButton: false,

			}
		},
		onShow() {
			try {
				const value = uni.getStorageSync('topicList') || '[]';
				const type = uni.getStorageSync('topicType')
				let parse = JSON.parse(value)
				console.log('onShow')
				// 0'默认题库', 1'缓存题库', 2'默认&缓存题库'
				switch (type) {
					case '0':
						this.list = [...list]
						break;
					case '1':
						this.list = [...parse]
						break;
					case '2':
						this.list = [...list, ...parse]
						break;
					default:
						this.list = [...list]
						break;
				}
				this.list = this.list.map(v=>{
					return {
						...v,
						isRead: false
					}
				})
			} catch (e) {
				// error
				console.log(e)
			}
		},
		onHide() {
			console.log('onhide')
			this.isShowAnswer = false
			this.isShowCheckButton = false
			this.question = ''
			this.answer = ''
		},
		methods: {
			httpString(s) {
			var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
			//var reg = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
			//var reg=/(http(s)?\:\/\/)?(www\.)?(\w+\:\d+)?(\/\w+)+\.(swf|gif|jpg|bmp|jpeg)/gi;
			//var reg=/(http(s)?\:\/\/)?(www\.)?(\w+\:\d+)?(\/\w+)+\.(swf|gif|jpg|bmp|jpeg)/gi;
			var reg= /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
			//var reg= /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/;
			//v = v.replace(reg, "<a href='$1$2'>$1$2</a>"); //这里的reg就是上面的正则表达式
			//s = s.replace(reg, "$1$2"); //这里的reg就是上面的正则表达式
			s = s.match(reg);
			console.log(s)
			return(s)
			},
			handleCopy(){
				let href = this.httpString(this.answer)
				console.log(href)
				if(href&&href.length){
				uniCopy({
					content: href[0],
					success: (res) => {
						uni.showToast({
							title: '识别到答案中有链接，已帮您复制第一个链接',
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
				}else{
					uni.showToast({
						title: '没有检测到链接',
						icon: 'none',
						duration: 3000,
					})
				}
			},
			rangeRandom(start, end) {
				return Math.floor(Math.random() * (end - start + 1) + start);
			},
			handleChose() {
				if(this.list.length==0){
					uni.showToast({
						title: '当前题库没有习题了',
						icon: 'none',
						mask: true,
						duration: 1500
					})
					return
				}
				this.isShowAnswer = false
				this.isShowCheckButton = true
				const noReadArr = this.list.filter(v => !v.isRead)
				const length = noReadArr.length - 1
				if (noReadArr.length == 0) {
					this.list.forEach(v => v.isRead = false)
					this.handleChose()
					return
				}
				let index = this.rangeRandom(0, length)
				if(noReadArr[index].question===this.question){
					index = noReadArr[index+1]?index+1:noReadArr[index-1]?index-1:index
				}
				console.log(length, index)
				noReadArr[index].isRead = true
				const {
					question,
					answer
				} = noReadArr[index]
				this.question = question
				this.answer = answer

			},
			handleCheck() {
				this.isShowAnswer = true
				this.isShowCheckButton = false
			}
		}
	}
</script>

<style lang="less">
	.content {
		display: flex;
		flex-direction: column;

	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-start;
		padding-left: 20rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.question {
		font-size: 30rpx;
		color: #383838;
		padding: 20rpx 20rpx 20rpx 0;
		image {
			width: 30rpx;
			height: 30rpx;
			vertical-align: -3rpx;
			margin-right: 10rpx;
		}
	}

	.button-wrap {}

	.answer {
		background: #e4e1e1;
		color: #535353;
		padding: 20rpx;
		font-size: 40rpx;
	}

	.box {
		display: flex;
		flex-direction: column;
		margin: 20rpx;

		.header {}

		.answer {
			height: 800rpx;
			overflow: auto;
			border-radius: 16rpx;
		}
	}
</style>
